<template>
  <a-modal
    title="编辑规则"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="店铺等级"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input v-decorator="['shopLevel', {rules: [{required: true, message: '请输入店铺等级！'}]}]" type="number" />
        </a-form-item>

        <a-form-item
          label="铺币"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input v-decorator="['shopCoin', {rules: [{required: true, message: '请输入铺币！'}]}]" type="number" />
        </a-form-item>

        <a-form-item
          label="看广告发放铺币"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input v-decorator="['watchAdShopCoin', {rules: [{required: true, message: '请输入看广告发放铺币！'}]}]" type="number" />
        </a-form-item>

        <a-form-item
          label="看广告发放电量"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input v-decorator="['watchAdPower', {rules: [{required: true, message: '请输入看广告发放电量！'}]}]" type="number" />
        </a-form-item>

        <a-form-item
          label="帮助看广告发放电量"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input v-decorator="['helpWatchAdPower', {rules: [{required: true, message: '请输入帮助看广告发放电量！'}]}]" type="number" />
        </a-form-item>

        <a-form-item
          label="帮助每日观看广告最大数"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input v-decorator="['helpTodayAdMaxCount', {rules: [{required: true, message: '请输入帮助每日观看广告最大数！'}]}]" type="number" />
        </a-form-item>

        <a-form-item
          label="升级广告数"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input v-decorator="['upAdNumber', {rules: [{required: true, message: '请输入升级广告数！'}]}]" type="number" />
        </a-form-item>

        <a-form-item
          label="升级消耗铺币"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input v-decorator="['upShopCoin', {rules: [{required: true, message: '请输入升级消耗铺币！'}]}]" type="number" />
        </a-form-item>

        <a-form-item
          label="运行电量"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input v-decorator="['runPower', {rules: [{required: true, message: '请输入运行电量！'}]}]" type="number" />
        </a-form-item>

        <a-form-item
          label="利润比例"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input v-decorator="['profitScale', {rules: [{required: true, message: '请输入利润比例！'}]}]" type="number" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { apiUpdateShopRule } from '@/api/shop/rule'
import AFormItem from 'ant-design-vue/es/form/FormItem'
import pick from 'lodash.pick'

export default {
  components: { AFormItem },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      visible: false,
      confirmLoading: false,

      roleIds: [],
      roleList: [],
      status: true,
      treeData: [],
      form: this.$form.createForm(this)
    }
  },
  methods: {
    async edit (record) {
      this.form = this.$form.createForm(this)
      this.visible = true
      this.confirmLoading = true

      this.record = record
      const { form } = this

      this.$nextTick(() => {
        const formData = pick(record, ['shopLevel', 'shopCoin', 'watchAdShopCoin', 'watchAdPower', 'helpWatchAdPower', 'helpTodayAdMaxCount', 'upAdNumber', 'upShopCoin', 'runPower', 'profitScale'])
        form.setFieldsValue(formData)
      })

      this.confirmLoading = false
    },
    handleCancel () {
      this.visible = false
    },
    handleSubmit () {
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields(async (errors, values) => {
        if (!errors) {
          values.id = this.record.id
          const { code, message } = await apiUpdateShopRule(values)
          this.confirmLoading = false
          if (code === 200) {
            this.$message.success('添加成功')
            this.visible = false
            this.$emit('ok')
          } else {
            this.$message.warning(message)
          }
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleChange (e) {
      this.roleIds = e
    },
    onTreeSelectChange (value) {
      const { form } = this
      form.setFieldsValue({ deptId: value })
    }
  }
}
</script>
